<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文本格式化属性</title>
		<!-- 文本格式化属性针对文本相关操作（四种方式10个属性）
		 1.控制字体：font fanily、font-size、font-weight
		 2.控制文本布局：text-aglin、line-height、letter-spacing、word-spacing
		 3.文本修饰效果：text-decoration、text-shadow
		 4.处理文本效果：white-space
		 -->
		 <style>
			 /* css3语法：选择器{
				         属性：  属性值；
						 属性：  属性值；
						 ......
         			 }
					 叫法：一个样式
			  */
			 bod y div#d1{
				 color: #ffff00;
				 /*  知识点1：文本格式化属性控制字体*/
				 font-family:微软雅黑,sans-serif;
				 /* 设置多个字体：浏览器会按照顺序寻找可用字体
				  用户体验，用户系统有什么字体，优先指定字体
				  通常与统配选择器使用  *{}
				  */
				 /* 知识点2：文本格式化属性控制字体
				  font-size：字体大小属性，与单位共存
				  单位  px 像素   使用特点：绝对值、pc端
				  |em  相对单位，理解：倍数
				                使用特点：相对于元素按照倍数方式，移动端
				  */
				 /* 知识点3：文本格式化属性控制字体
				  font-weight：字体粗细属性，不存在单位
				             属性值：数值【100 200 300 .... 900】
							        常用数值：400
							        单词【normal、bold、light】
	               使用方法：统配选择器搭配使用：指定全局字体正常字体粗细
				  */
				 
				 font-weight:100;
				 font-size: 2em;
				 /* 补充：1.英文大写，2.首字母大写 3.段落开始间距200px*/
				 text-transform: uppercase;
				 text-transform: capitalize;
				 text-indent: 200px;
			 }
			  div#d1{/* 通过加权方式，锁定元素  权值：101*/
				 color: #00ff00;
				 /* 知识点4：文本格式化属性控制文本格式对齐  间隙]
				  text-align:文本的对齐属性
				  left|right|center|justify:两端对齐,用于弹性布局
				  */
				 text-align: justify;
				 /* 知识点5：文本格式化属性控制文本格式[对齐  间隙]
				  行高属性line-height:文本垂直效果
				  使用方式：1.高度属性：属性值一致
				           2.在高度属性上加行高
				  */
				 border:1px solid red;
				 height: 100px;
				 line-height: 100px;
				 /* 补充：文本对齐和行高属于对齐|间隙,字符和单词之间的距离 */
				 /* 知识点6：letter-spacing:设置字符之间的间隙
				    知识点7： word-spacing:设置单词之间的间隙
				 */
				lett er-spacing: 3px;
				word-spacing: 2px;
			 }
			 
		 #d1{/* 权值：100 */
		 
		 a.c1{/* 权值 */
		     /* 知识点8：text-decoration 修饰超链接样式 
			 使用方法：与通配符一起使用，设置全局页面超链接样式
			 属性值:none|underline|line-through
			 */
			text-decoration: underline;
			/* 知识点9：text-shadow 修饰文本阴影
			    属性值：X轴  Y轴  blur模糊距离 color
			 */
			text-shadow: 5px 5px 5px #ffff00;
		 }
		 p{
			 border: 1px solid red;
			 /* 知识点10：文本换行效果
			   white-space：文本换行属性
			   属性值：nowrap 不换行,只显示一行，超出部分隐藏
			   |pre 保存空格和回车|normal 默认，空格合并，换行隐藏
			  */
			 white-space: nowrap;
			 overflow: hidden;
		 }
		 </style>
	</head>
	<body>
		<!-- 需求： 创建一个div同时指定一个别名，添加假文【tab】
		           id选择器，通过加权找到div，添加颜色
		 -->
		 <div id="d1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae blanditiis nemo veritatis necessitatibus eius neque adipisci dolorem, illo, expedita, eum pariatur aspernatur consequatur voluptatum distinctio voluptatibus quo. Magni, illo! Quae!</div>
	     <hr>
		 <h4>文本修饰效果</h4>
		 <!-- 文本修饰相关属性
		     知识点7：text-devoration属性：设置超链接效果
		  -->
		 <a class="c1 c2" href="http://www.tsgzy.edu.cn">实现跳转【方式：6种】</a>
		 <div style="height: 800px;"></div>
		 <marquee>
			 <h4>处理文本效果</h4>
		 </marquee>
		 <p>Lorem ipsum dolor sit amet 
		 consectetur adipisicing elit. 
		 Quibusdam sed quisquam esse architecto, earum, qui minus cumque cupiditate dolorum minima rem nobis sit fugit totam nesciunt dicta? Nostrum, omnis eligendi!</p>
	</body>
</html>